<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证是否合法
        需要验证的规则是：必须由字母数字和下划线组成，并且长度是5-12位
         */
        function onclickFun() {
            //1.当我们要操作一个标签时，一定要获取这个标签对象
            var usernameObj=document.getElementById("username");
            //Object HTMLInputElement 它就是dom对象
            var usernameText=usernameObj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式技术
            var patt=/^\w{5,12}$/;
            /*
            test()方法用于测试某个字符串是不是匹配我的规则
            匹配就返回true,不匹配就返回false
             */

            var usernameSpanObj=document.getElementById("usernameSpan");
            //innerHTML 表示起始标签和结束标签的内容
            //innerHTML 这个属性可读可写
            // usernameSpanObj.innerHTML="国哥真可爱";
            // alert(usernameSpanObj.innerHTML);

            if(patt.test(usernameText)){
                // alert("用户名合法");
                // usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML=" <img src=\"right.png\" width=\"12\" height=\"12\">";
            }else{
                // alert("用户名不合法");
                usernameSpanObj.innerHTML=" <img src=\"wrong.png\" width=\"12\" height=\"12\">";
            }
        }
    </script>
</head>
<body>
        用户名:<input type="text" id="username" value="wzg"/>
        <span id="usernameSpan" style="color: red;">
        </span>
        <button onclick="onclickFun()">校验</button>
</body>
</html>